/**
 * 作用：获取标签的样式（行间、非行间）
 * @param {Object} elem 标签
 * @param {String} attr 属性
 * @returns 
 */
function getStyle(elem, attr) { //标签:elem，属性:attr
    if (elem.currentStyle) {
        var w = elem.currentStyle[attr];
    } else {
        var w = getComputedStyle(elem)[attr];
    }
    return w;
}

/**
 * 作用：运动函数封装
 * @param {Object} elem 标签
 * @param {String} attr 属性
 * @param {Number} step 步长
 * @param {Number} target 目标值
 */
function move(elem, attr, step, target) { //标签，属性，步长，目标值
    step = parseInt(getStyle(elem, attr)) < target ? step : -step
        //6：问题：如果多次点击，会越来越快
        //原因：定时器会叠加，
        //解决：不想让速度变化，在下一个定时器开启之前，停止之前的定时器
    clearInterval(elem.timer);
    //5.开启定时器，让图片自己运动
    elem.timer = setInterval(function() {
        //4.获取元素的当前位置
        var cur = parseInt(getStyle(elem, attr)) + step;
        //5.到800的位置，停
        //问题：往回走的时候，会直接闪现到目标点0
        //原因：启程>= ,凯旋<=
        //解决：>= && 启程     <=凯旋
        if ((cur >= target && step > 0) || (cur <= target && step < 0)) {
            cur = target;
            clearInterval(elem.timer);
        }
        //3.设置元素的位置 left
        elem.style[attr] = cur + "px";
    }, 30);
}

/**
 * 作用：绑定事件兼容函数
 * @param {Object} ele 元素
 * @param {String} eventType 事件类型（不加on）
 * @param {Function} callback 事件处理函数
 */
function bind(ele, eventType, callback) {
    if (ele.addEventListener) {
        // 标准浏览器
        ele.addEventListener(eventType, callback);
    } else {
        // 低版本IE
        ele.attachEvent('on' + eventType, callback);
    }
}

/**
 * 作用：取消事件兼容函数
 * @param {Object} ele 元素
 * @param {String} eventType 事件类型（不加on）
 * @param {Function} callback 事件处理函数
 */
function unbind(ele, eventType, callback) {
    if (ele.removeEventListener) {
        // 标准浏览器
        ele.addEventListener(eventType, callback);
    } else {
        // 低版本IE
        ele.detachEvent('on' + eventType, callback);
    }
}

///登录注册
function login_Sign() {
    //                  注册页面的js效果
    //                  注册页面的js效果
    //获取头部登录
    var oLadding = document.querySelector("#ladding");
    //获取头部注册
    var oSign = document.querySelector("#sign");
    //获取登录的大页面---视图
    var oShelter = document.querySelector("#shelter");
    //获取注册的大页面---视图
    var oWrap = document.querySelector("#wrap");
    //获取登录页面关闭页面的巴叉
    var she_Close = document.querySelector("#close");
    //获取注册页面关闭页面的巴叉
    var wrap_Close = document.querySelector("#close1");
    //获取注册节点
    //注册的input节点
    var wrap_Inp = document.querySelectorAll("#wrap input");
    //错误信息提示的节点
    var wrap_Wrong = document.querySelectorAll("#wrap .wrong");
    //验证码节点
    var wrap_Proof = document.querySelector("#wrap .proof");
    //复选框的节点
    var wrap_Check = document.querySelector("#wrap .check");
    //注册页面的 注册按钮
    var wrap_Btn = document.querySelector("#wrap button");
    //控制登陆页面的显示和隐藏
    oLadding.onclick = function() {
        oShelter.style.display = "block";
    };
    //登录框的关闭事件
    she_Close.onclick = function() {
        oShelter.style.display = "none";
    };
    //控制注册页面的显示和隐藏
    oSign.onclick = function() {
        oWrap.style.display = "block";
    };
    //注册框的关闭事件
    wrap_Close.onclick = function() {
        oWrap.style.display = "none";
    };
    //封装手机和密码的正则表达式
    //验证手机号的正则表达式
    var reg_ph = /^1[3-9]\d{9}$/;
    //验证密码的正则表达式
    var reg_pass = /(?=.*\d.*)(?=.*[a-zA-Z].*)^[0-9A-Za-z]{6,16}$/;
    //手机号的失焦验证
    wrap_Inp[0].onblur = function() {
        //验证正则
        if (reg_ph.test(this.value)) {
            wrap_Wrong[0].innerHTML = "";
            this.style.borderColor = "#80C4AE";
        } else {
            wrap_Wrong[0].innerHTML = "请输入正确的手机格式";
            this.style.borderColor = "red";
        };
    };
    //密码的失焦验证
    wrap_Inp[1].onblur = function() {
        //验证正则
        if (reg_pass.test(this.value)) {
            wrap_Wrong[1].innerHTML = "";
            this.style.borderColor = "#80c4ae";
        } else {
            wrap_Wrong[1].innerHTML = "请输入正确的6-16位数字和字母组合";
            this.style.borderColor = "red";
        };
    };
    //判断第二次输入的密码与第一次是否一致
    wrap_Inp[2].onblur = function() {
        if (wrap_Inp[1].value === wrap_Inp[2].value && wrap_Inp[2].value != "") {
            wrap_Wrong[2].innerHTML = "";
            this.style.borderColor = "#80c4ae";
        } else {
            wrap_Wrong[2].innerHTML = "两次密码输入不一致";
            this.style.borderColor = "red";
        };
    };
    //判断验证码是否正确
    wrap_Inp[3].onblur = function() {
        if (wrap_Inp[3].value.toLowerCase() === wrap_Proof.innerHTML.toLowerCase()) {
            wrap_Wrong[3].innerHTML = "";
            this.style.borderColor = "#80c4ae";
        } else {
            wrap_Wrong[3].innerHTML = "验证码输入不正确";
            this.style.borderColor = "red";
        };
    };
    //点击注册在判断每个input框的内容
    wrap_Btn.onclick = function() {
        //点击注册的时候验证所有input
        var wrap_Arr = [
            "请输入正确的手机格式",
            "请输入正确的6-16位数字和字母组合",
            "两次密码输入不一致",
            "验证码输入不正确"
        ];
        //循环进行判断，看是否有空input
        for (var i = 0; i < wrap_Inp.length; i++) {
            if (wrap_Inp[i].value == "") {
                wrap_Wrong[i].innerHTML = wrap_Arr[i];
            };
        };
        //如果你的错误信息没有任何内容，则无错误,就继续执行，有错误就跳出当前函数（结束当前函数）
        //通过循环判断
        for (var i = 0; i < wrap_Wrong.length; i++) {
            if (wrap_Wrong[i].innerHTML != "") {
                return false;
            };
        };
        //复选框是否勾选
        if (wrap_Check.checked == false) {
            alert("请勾选《用户使用协议》");
            return false;
        } else {
            alert("注册成功");
        };

        //把注册里面的手机号和密码本地储存

        /*
            如果可以注册N条数据。 每一条数据是一个对象。 对象我们要存放到数组中。
            我们要先判断， 存储中是否有数据， 如果有数据， 取出来， 往已有数据中追加新数据
            如果存储中没有数据， 那我们就定义一个空数组
        */

        if (localStorage.getItem("user") == null) {
            var store_Arr = [];
        } else {
            var store_Arr = JSON.parse(localStorage.getItem("user"));
        };
        //在数组末尾追加数组
        store_Arr.push({
            name: wrap_Inp[0].value,
            password: wrap_Inp[1].value
        });
        //存储必须要用字符串格式
        localStorage.setItem("user", JSON.stringify(store_Arr));
        oWrap.style.display = "none";
        oShelter.style.display = "block";
        console.log(osh_Arr.name);

        return false;
    };
    //                  注册页面结束    //
    //                  注册页面结束    //
    //                  注册页面结束    //
    //                  注册页面结束    //
    //                  注册页面结束    //





    //                  登录页面的js
    //                  登录页面的js
    //获取登录页面的input
    var osh_Inp = document.querySelectorAll("#shelter input");
    //获取登录页面的错误提示框
    var osh_Cat = document.querySelector("#caution");
    //获取登录页面的登录按钮
    var osh_Btn = document.querySelector("#shelter button");
    //获取头部登录/注册的大盒子
    var head_Login = document.querySelector("#header .login");
    //获取头部头像的大盒子 
    var head_My = document.querySelector("#my");
    //获取退出按钮
    var osh_Exit = document.querySelectorAll("#my a")[5];
    //获取头像下面的div
    var osh_Item = document.querySelector("#item");
    //获取头像
    var osh_Pro = document.querySelector("#profile");
    //点击登录按钮 头像出现 登录/注册消失
    osh_Btn.onclick = function() {
        var osh_Arr = JSON.parse(localStorage.getItem("user"));
        //循环判断是否和存储的一致
        for (var i = 0; i < osh_Arr.length; i++) {
            if (osh_Arr[i].name == osh_Inp[0].value && osh_Arr[i].password == osh_Inp[1].value) {
                //登录页面消失
                oShelter.style.display = "none";
                //登录/注册消失
                head_Login.style.display = "none";
                //头像出现
                head_My.style.display = "block";
                //储存一个结果 为了刷新不消失
                localStorage.setItem("login", true);
            } else {
                osh_Cat.innerHTML = "账号或者密码输入错误";
            };

        };
        return false;
    };

    //当用户刷新的时候，我们可以通过登录状态去判断是否登录了。已登录就保持头像的渲染，未登录就出现登录/注册
    if (localStorage.getItem("login") == "true") {
        head_My.style.display = "block";
        head_Login.style.display = "none";
    } else {
        head_Login.style.display = "block";
        head_My.style.display = "none";
    };
    //鼠标划入头像 div显示
    osh_Pro.onmouseover = function() {
        osh_Item.style.display = "block";
    };
    //点击退出的时候头像消失  登录/注册出现
    osh_Exit.onclick = function() {
        head_My.style.display = "none";
        localStorage.removeItem("login");
        head_Login.style.display = "block";
    };
    //鼠标移出div  消失
    osh_Item.onmousemove = function() {
        osh_Item.style.display = "block";
        osh_Item.onmouseout = function() {
            osh_Item.style.display = "none";
        };
    };
    //                  登录页面js结束  //
    //                  登录页面js结束  //
    //                  登录页面js结束  //
    //                  登录页面js结束  //
    //                  登录页面js结束  //

}